<template>
  <div>jjhjhhj
    <div class="div44">
      <p class="pp33">最近最受期待</p>
      <article class="daiyin">
      <ul v-for="item1 in qidailist" :key="item1" class="ul33">
          <li>
              <img :src="item1.img" class="c112"/>
              <p>{{item1.wish}}<span>人想看</span></p>
              <p><span></span></p>
          </li>
          <li></li>
          <li class="line-ellipsis">{{item1.nm}}</li>
          <li>{{item1.comingTitle}}</li>
      </ul>
      </article>
    </div>



    <!-- <div v-for="item in daiyinglist" :key="item.id">{{ item.nm }}</div> -->
    <div v-for="(value, key) in daiyinglist" :key="key">
      <div class="box11">{{ key }}</div>
      <ul class="ul555">
        <li v-for="item in value" :key="item.id" class="box22" >
          <div>
            <img :src="item.img" />
          </div>
          <div>
            <p class="ppp1">{{ item.nm }}</p>
            <p class="ppp2"><i>{{ item.wish }}</i>人想看</p>
            <p class="ppp3">主演：{{ item.star }}</p>
            <p class="ppp4">{{ item.rt }}上映</p>
          </div>
          <div>
             <button v-if="item.showst==1" class="gp1">想看</button>
              <button v-else class="ys1">预售</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>


import axios from "axios";
export default {
  name: "Daiying",
  data: function () {
    return {
      daiyinglist: [],
      qidailist:[]
    };
    
  },

  created() {
    axios
      .get(
        "/ajax/comingList?ci=30&token=&limit=10&optimus_uuid=3084E8D0146211ECA50A477D88250D251D93073CCDCC41D9A4CAC797521EC42D&optimus_risk_level=71&optimus_code=10"
      )
      .then((res) => {
        console.log(res);
        var list = res.data.coming;
        var daiying = {};
        //怎样将 一维数组 按照 日期转为二维数组
        list.forEach((item) => {
          item.img = item.img.replace("w.h", "128.180");
          if (daiying[item.comingTitle]) {
            daiying[item.comingTitle].push(item);
          } else {
            //待映的对象里创建了一个新的数组
            daiying[item.comingTitle] = [];
            daiying[item.comingTitle].push(item);
          }
        });
        console.log(daiying);
        this.daiyinglist = daiying;
      });
      axios.get('/ajax/mostExpected?ci=30&limit=10&offset=0&token=&optimus_uuid=F9064EC015CA11ECAB5673A92DB2C53241F4E7D1B5544A319816035265AEA1DD&optimus_risk_level=71&optimus_code=10').then((res)=>{
        console.log(res);
         res.data.coming.forEach((item)=>{
                item.img=item.img.replace('w.h','128.180')
            });
        this.qidailist=res.data.coming
      })
     
  },
};
</script>

<style>
.c112{
    height: 3.066667rem;
    width: auto;
}
.div44{
    background: #fff;
    padding: 12px 0 12px 15px;
    margin-bottom: 10px;
}
.pp33{
    margin: 0;
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
    text-align: left;
}
.daiyin{
    overflow: scroll;
    white-space: nowrap;
}
.ul33{
    display: inline-block;
    width: 85px;
    overflow: hidden;
    margin-right: 10px;
}
.ul33 li:first-child{
    width: 85px;
    height: 115px;
    position: relative;
    margin-bottom: 6px;
}
.ul33 li:first-child p:nth-child(2){
    position: absolute;
    left: 4px;
    bottom: 0;
    color: #faaf00;
    font-size: .32rem;
    font-weight: 600;
    margin: 0;
}
.ul33 li:first-child p:last-child{
    width: 28px;
    line-height: 28px;
    background: rgba(61,63,71,.6);
    text-align: center;
    border-bottom-right-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
}
.ul33 li:first-child p:last-child span{
    /* background-image: url("../../assets/下载.png"); */
    display: inline-block;
    width: 10px;
    height: 10px;
    background-size: 100%;
    background-repeat: no-repeat;
}
.ul33 li:nth-child(3){
    margin: 0;
    font-size: 13px;
    color: #222;
    margin-top: .3rem;
    margin-bottom: 3px;
}
.ul33 li:last-child{
    margin: 0;
    font-size: 12px;
    color: #999;
}
.line-ellipsis {
  
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.box11{
  text-align: left;
  padding: .1rem;
  margin-left: .2rem;
}
.ul555 .box22{
  display: flex;
  text-align: left;
  height: 2.6rem;
  border-bottom: 1px solid #ccc;

}
.box22 div:nth-child(1){
  width: 20%;
}
.box22 div:nth-child(2){
  width: 60%;
}
.box22 div:nth-child(3){
  width: 19%;
  
}
.box22 div:nth-child(1) img{
  width: 1.706667rem;
  height: 2.4rem;
  margin-top: .1rem;
  margin-left: .3rem;
}
.box22 div:nth-child(2){
  margin-top: .1rem;
  margin-left: .3rem;
}
.ppp1{
  font-size: 16px;
  font-weight: bold;
  margin-top: .1rem;
}
.ppp2{
  font-size: 12px;

  margin-top: .1rem;
}
.ppp2 i{
  font-size: 16px;
  color:#faaf00 ;
  font-weight: bold;

}
.ppp3{
  font-size: 12px;

  margin-top: .1rem;
}
.ppp4{
  font-size: 12px;
 
  margin-top: .1rem;
}
.gp1{
    margin-top: .7rem;
    width: 1.5rem;
    height: .8rem;
    border-radius: .3rem;
    border: #faaf00;
    background: #faaf00;
    color:#fff;
    font-size: 14px;

}
.ys1{
    width: 1.5rem;
    height: .8rem;
    margin-top: .7rem;
    border: #3c9fe6;
    border-radius: .3rem;
    font-size: 14px;
    background: #3c9fe6;
    color:#fff;

} 
</style>